rem 布局 |

详细步骤

1、UI 通常会出一张 640 或者 750 的设计图。

2、在代码方面，首先要添加一行 mete 标签

1	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

这行 viewport 的意思就是视口，可以让网页宽度默认等于屏幕宽度，并且禁止缩放。

3、用 JS 修改 html 的 fontSize

除以 20 的原因是为了将 640 的设计图分为 20 份，纯粹是为了数值好算，并没有其它意义。

1
2
3

document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px';
// 750 分为 25 份
document.querySelector('html').style.fontSize = window.screen.width / 25 + 'px';

如果是调试的时候，可以这样写，动态改变

1
2
3

window.onresize = function() {
	  document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px';
}

这段代码需要放在头部，为了最先加载，单独写这一条要注意 window.onresize 的触发时机。

4、css 中的 rem 计算

以640的设计图为例，160 为设计图中测量出来的 160 px，32 为 640 / 20 = 32

1
2
3

.box{
  width: (160/32)*1rem;
}

如果是 750 的设计图，建议分成 25 份，30 为 750 / 25 = 30

1
2
3

.box{
  width: (160/30)*1rem;
}

简写

1
2
3

.box {
  width: (160rem/30);
}

使用方法计算

// rem
@function ptr($size) {
    @return $size / 30 * 1rem;
}
// 百分比同样适用
@function ptb($size) {
    @return $size / 1334 * 100%;
}
// 使用
.box {
  width: ptr(160);
}

总结：

ui出的图就是640的，在头部引入一段JS代码，设置html的fontsize等于屏幕大小除以20，就是分成20分，然后量出设计图中的尺寸，因为640分成20份，就是32，所以再除以32，乘以1rem，就可以得出一个rem的尺寸。